<!DOCTYPE html>

<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<script id="template/accordion/accordion.html" type="text/ng-template">
    <div class="accordion" ng-transclude></div>
</script>

<script id="template/accordion/accordion-group.html" type="text/ng-template">
    <div class="accordion-group">
        <div class="accordion-heading" style="margin-bottom:0; border-bottom:0">
           <a style="bottom:0" class="accordion-toggle" ng-class="{'collapsed':!isOpen,'open':isOpen}" ng-click="isOpen = !isOpen" accordion-transclude="heading">{{heading}}</a>
        </div>
        <div class="accordion-body" style="display:block; margin-bottom:0" collapse="!isOpen">

            <div class="accordion-inner" ng-transclude></div>  </div>
    </div>
</script>

<div xmlns="http://www.w3.org/1999/html">

<h2><span openlmis-message="menu.header.dashboard.summary"></span><div ng-show="showSyncDashboard" class="pull-right"><a id="createRnr" ng-click="syncDashboard()" href="#">Sync Dashboard</a><div class="loader-icon" ng-show="inProgress"></div></div></h2>
<div style="background-color: #f9f9f9; padding: 5px">

    <div class="row-fluid">
        <div class="span12">

            <ng-include src="'/public/pages/dashboard/shared/dashboard-form.html'"></ng-include>
            <ng-include src="'/public/pages/dashboard/shared/alerts.html'"></ng-include>

        </div>
    </div>

    <accordion>
        <accordion-group class="blue-steel" is-open="fillRates.openPanel">
            <accordion-heading>
                <div class="accordion-title">
                    <div class="caption">
                        <i class="flaticon-speedometer1"></i><span openlmis-message="label.fill.rates"></span>
                    </div>
                    <div class="tools">
                        <i  ng-class="{'icon-minus-sign': fillRates.openPanel, 'icon-plus-sign': !fillRates.openPanel}"></i>
                    </div>
                </div>
            </accordion-heading>
                <div class="row-fluid">
                    <div class="span3">
                        <div class="form-field">
                            <span openlmis-message="label.facility"><span class="label-required">*</span></span>
                            <select ui-select2 style="width:200px;" id="facility-name"  name="facility" ng-model="formFilter.facilityId" ng-change="processFacilityFilter()"  required="true">
                                <option  ng-repeat="option in allFacilities" value="{{ option.id }}">{{ option.code }} - {{ option.name }}</option>
                            </select>
                        </div>
                    </div>

                </div>
            <div class="row-fluid">
                <div class="span6">
                    <div class="simple-panel blue-madison">
                        <div class="panel-header bg-blue-madison" openlmis-message="label.order.fill.rate"></div>
                        <div class="filter-value">
                            <ul>
                                <li><span openlmis-message="label.program"></span>:<span class="filter-label" >{{formFilter.programName}}</span></li>
                                <li><span openlmis-message="label.period"></span>:<span class="filter-label" >{{formFilter.periodName}}</span></li>
                                <li><span openlmis-message="label.facility"></span>:<span class="filter-label"  >{{formFilter.facilityName}}</span></li>
                            </ul>
                        </div>
                        <div ng-show="orderFillChart.data == undefined">
                            <label class="chart-note">
                                No data to render chart
                            </label>
                        </div>

                        <div ui-chart="orderFillChart.data" chart-options="orderFillChart.option" style="width:100%;height:300px;" ng-show="showOrderFill"></div>
                    </div>
                </div>
                <div class="span6 simple-panel blue">
                    <div class="panel-header bg-blue" openlmis-message="label.item.fill.rate"></div>
                    <div class="filter-value">
                        <ul>
                            <li><span openlmis-message="label.program"></span>:<span class="filter-label" >{{formFilter.programName}}</span></li>
                            <li><span openlmis-message="label.period"></span>:<span class="filter-label" >{{formFilter.periodName}}</span></li>
                            <li><span openlmis-message="label.facility"></span>:<span class="filter-label"  >{{formFilter.facilityName}}</span></li>
                        </ul>
                    </div>
                    <div ng-show="productItemFillRates == undefined || productItemFillRates.length == 0">
                        <label class="chart-note">No data to render chart</label>
                    </div>
                    <table ng-show="showItemFill" style="width:100%; margin: 10px">
                        <tr>
                            <td style="width: 33%" ng-repeat="itemFillRate in productItemFillRates">
                                    <span class="easychart" style="height: 75px" easypiechart options="itemFillRate.option"  percent="itemFillRate.percent">
                                    <span class="easychart-percent" ng-bind="itemFillRate.percent"></span>
                                    </span>
                                <!--<div style="width: 60%; padding-left: 20px;">{{itemFillRate.name}}</div>-->
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 33%" ng-repeat="itemFillRate in productItemFillRates">
                                <div style="width: 60%; padding-left: 20px;">{{itemFillRate.name}}</div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

        </accordion-group>
    </accordion>


    <div class="row-fluid">
        <div class="span6"> <!-- District Reporting Performance -->
            <accordion>
                <accordion-group class="purple-wisteria" is-open="districtReporting.openPanel">
                    <accordion-heading >
                        <div class="accordion-title">
                            <div class="caption">
                                <i class="flaticon-pie2"></i> <span openlmis-message="label.district.reporting"></span>
                            </div>
                            <div class="tools">
                                <i  ng-class="{'icon-minus-sign': districtReporting.openPanel, 'icon-plus-sign': !districtReporting.openPanel}"></i>
                            </div>
                        </div>
                    </accordion-heading>
                    <div class="filter-value">
                        <ul>
                            <li><span openlmis-message="label.program"></span>:<span class="filter-label" >{{formFilter.programName}}</span></li>
                            <li><span openlmis-message="label.period"></span>:<span class="filter-label" >{{formFilter.periodName}}</span></li>
                            <li><span openlmis-message="label.zone"></span>:<span class="filter-label"  >{{formFilter.zoneName}}</span></li>
                        </ul>
                    </div>
                    <div ng-hide="reportingChartData"><label class="chart-note">No data to render chart</label></div>
                    <div  ng-show="reportingChartData">
                        <a-float id="district-reporting" af-option="reportingPieChartOption" af-data="reportingChartData" class="chart"></a-float>
                        <div id="districtReportLegend" class="chartLegend"></div>
                    </div>

                </accordion-group>
            </accordion>
        </div>
        <div  class="span6"> <!-- Stocking Efficiency -->
            <accordion>
                <accordion-group class="gray-cascade" is-open="stocking.openPanel">
                    <accordion-heading>
                        <div class="accordion-title">
                            <div class="caption">
                                <i  class="flaticon-bar"></i><span openlmis-message="label.stocking.efficiency"></span>
                            </div>
                            <div class="tools">

                                <i  ng-class="{'icon-minus-sign': stocking.openPanel, 'icon-plus-sign': !stocking.openPanel}"></i>
                            </div>
                        </div>
                    </accordion-heading>
                    <div class="filter-value">
                        <ul>
                            <li><span openlmis-message="label.program"></span>:<span class="filter-label" >{{formFilter.programName}}</span></li>
                            <li><span openlmis-message="label.period"></span>:<span class="filter-label" >{{formFilter.periodName}}</span></li>
                            <li><span openlmis-message="label.zone"></span>:<span class="filter-label"  >{{formFilter.zoneName}}</span></li>
                        </ul>
                    </div>
                    <div ng-hide="multiBarsData"><label class="chart-note">No data to render chart</label></div>
                    <div  ng-show="multiBarsData">
                        <a-float id="stocking-efficiency" af-option="multipleBarsOption" af-data="multiBarsData" class="chart"> </a-float>
                        <div id="multiBarsLegend" class="chartLegend"></div>
                    </div>

                </accordion-group>
            </accordion>
        </div>
    </div>

    </div>


</div>
<div id="flotTip"></div>

